<template>
	<view v-if="pageShow" class="contanier">
		<view class="topBar">
			<topCommonTitleBar class="title-bar" :statePerch="true" arrow="white" titleColor="white" title="活动中心"
				title-size="36rpx" titleWeight="400">
			</topCommonTitleBar>
			<view class="rules" @click="goRules">规则说明</view>
		</view>
		<scroll-view class="mt-scroll" scroll-y="true" style="height: 92vh">
			<u-notice-bar :text="topTips" bgColor="#FA6F46" color="#fff" direction="column"></u-notice-bar>
			<view class="top-area">
				<view class="left-bg">
					<view class="bamboo-num">
						{{ userInfo.money }}
					</view>
					<view class="bamboo-view" @click="bambooView()">
						查看当前积分
					</view>
					<image
						src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/activityCenter/gold-coin.png"
						class="gold-img"></image>
				</view>
				<view class="right-bg">
					<view class="bamboo-num" style="margin-top: 26rpx"> 兑换好礼 </view>
					<view class="bamboo-view" @click="goShopList" style="margin-top: 22rpx">
						积分直接抵钱花
					</view>
					<image
						src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/activityCenter/gift-icon.png"
						class="gold-img"></image>
				</view>
			</view>
			<view class="sign-in">
				<view class="sign">
					<view class="sign-top">
						<view class="left"> 签到领积分 </view>
						<view class="right">
							<text class="notice">签到提醒</text>
							<u-switch v-model="switchValue" @change="switchChange" inactiveColor="#D8D8D8"
								activeColor="#22B63B" :size="14" :asyncChange="true"></u-switch>
						</view>
					</view>
					<view class="sign-content">
						<view class="sign-days" v-for="(item, index) in signList" :key="index">
							<text :class="index < signObj.continue_day ? 'gray1' : ''"
								style="font-size: 24rpx; color: #333; font-weight: 500">+{{ item.reward }}</text>
							<image :src="index < signObj.continue_day ? signedPic : signPic" class="gold"></image>
							<text style="font-size: 20rpx; color: #999; margin-top: 14rpx">{{
                index < signObj.continue_day ? "已签到" : `第${item.name}天`
              }}</text>
						</view>
					</view>
					<button :class="signObj.is_sign == 0 ? 'sign-btn' : 'signed-btn'" :disabled="btnClick"
						@click="signClick">
						{{
              !signObj
                ? "签到"
                : signObj.is_sign == 0
                ? "签到"
                : signObj.continue_day == 7
                ? "好样的，您已经连续签到7天啦"
                : `已签到，明日可获得${
                    signList[signObj.continue_day].reward
                  }积分`
            }}
					</button>
				</view>
			</view>
			<view class="task">
				<view class="task-tabs">
					<view class="tabs-item" :class="{ active: item.id == tabIndex }" v-for="(item, index) in tabList"
						:key="index" @click="tabClick(item)">
						{{ item.name }}
					</view>
				</view>
				<view class="task-content">
					<view v-if="taskList.length > 0">
						<view class="task-item" v-for="(item, index) in taskList" :key="index">
							<view class="item-title">
								<view class="title">
									<text
										style="font-weight: bold; font-size: 32rpx; color: #333">{{ item.name }}（{{ item.user_count }}/{{
                      item.count
                    }}）</text>
									<image
										src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/activityCenter/gold-icon.png"
										class="gold-img"></image>
									<view style="font-size: 24rpx; color: #aa9132; margin-left: 8rpx">积分 +
										{{ item.all_amount }}</view>
								</view>
								<view class="tips">
									{{ item.describe }}
								</view>
							</view>
							<view :class="
                  item.user_count === item.count ? 'sure-btn' : 'item-btn'
                " @click="taskClick(item)">
								{{ item.user_count === item.count ? "已完成" : "去完成" }}
							</view>
						</view>
					</view>
					<view v-if="taskList.length === 0">
						<view class="empty-wrap">
							<image class="empty-img"
								src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png">
							</image>
							<text class="tips">暂无任务</text>
						</view>
					</view>
				</view>
			</view>
			<view class="gift-store">
				<view class="store-title">
					<text style="font-size: 36rpx; color: #333; font-weight: 500">积分兑好礼</text>
					<text style="font-size: 24rpx; color: #666" @click="goShopList">查看全部＞</text>
				</view>
				<view class="commodity">
					<view class="item" v-for="(item, index) in shopList" :key="index" @click="goShopDetail(item)">
						<image :src="item.img" class="img" mode="aspectFill"></image>
						<view class="item-text">
							<text style="font-size: 30rpx; color: #333; font-weight: 500">{{
                item.name
              }}</text>
							<text style="font-size: 26rpx; color: #e1931f; margin-top: 17rpx">{{ item.money }}积分</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 完成任务弹窗 -->
		<pointsTips v-if="showPointsTips" :title="pointsObj.name" :points="pointsObj.amount"></pointsTips>

		<!-- 关闭签到弹窗 -->
		<u-modal :show="showSign" title="确认关闭提醒" :content="signContent" confirmText="仍然关闭" cancelText="我再想想"
			:showCancelButton="true" confirmColor="#222229" cancelColor="#1C87F3" @confirm="onConfirm"
			@cancel="onCancel" :buttonReverse="true"></u-modal>
	</view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pointsMall/index/index"
></script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>